<!--  -->
<template>
    <div :id="id" :data="data" :firsttype="firsttype" :secondtype="secondtype" style="width:100%;min-height:200px;">
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name:'stackedBar',
    props:{
      id:String,
      firsttype:String,
      secondtype:String,
      data:{
        type:Array,
        default:[]
      }
    },
    mounted(){
        this.$nextTick(()=>{
        let bar =echarts.init(document.getElementById(this.id));

        const option={
            tooltip : {
                trigger: 'axis',
                axisPointer : {            
                    type : 'shadow'  
                }
            },
            legend:{
              data:[this.firsttype,this.secondtype]
            },
            color:['#2d8cf0','#19be6b'],
            yAxis :{type : 'category',data:['数量']},
            xAxis:{type : 'value'},
            series:[
              {
                name:this.firsttype,
                type:'bar',
                stack:'总量',
                label:{
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }                   
                },
                data:this.data.map(item=>{
                    return item.value1
                })
              },
              {
                 name:this.secondtype,
                type:'bar',
                stack: '总量',

                label:{
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }                   
                },
                data:this.data.map(item=>{
                  return item.value2
                })
              }
            ]
        };
        bar.setOption(option);
        window.addEventListener('resize', function () {
            bar.resize();
        });
      })
    }

}

</script>
<style lang='scss' >
</style>